<template>
	<div>
		<div class="indexheader">
			<div class="headernav">
				<img src="./../assets/logo.svg" alt="" />
				<ul class="mannav">
					<router-link class="held" to="/"
						><p class="center">{{ $t('message.home') }}</p></router-link
					>
					<router-link class="held" to="/course"
						><p class="center">{{ $t('message.Courses') }}</p></router-link
					>
					<router-link class="held" to="/column/news"
						><p class="center">{{ $t('message.CryptoNews') }}</p></router-link
					>
					<router-link class="held" to="/question"
						><p class="center">{{ $t('message.QA') }}</p></router-link
					>

					<a class="held" target="_blank" rel="noopener noreferrer" href="https://www.tokenpocket.pro/"
						><p class="center">{{ $t('message.TokenPocket') }}</p></a
					>
				</ul>
				<div class="Horizontalspacing interval">
					<div class="Horizontalspacing center secr">
						<el-input v-model="keyword" placeholder="请输入关键字" style="width: 250px" class="input-with-select center">
							<template #prepend>
								<el-select v-model="select" placeholder="Select" style="width: 80px">
									<el-option label="文章" value="article" />
									<el-option label="课程" value="course" />
									<el-option label="问答" value="qaarticle" />
								</el-select>
							</template>
						</el-input>
						<el-button type="primary" @click="selectfun"
							><el-icon><Search /></el-icon
						></el-button>
					</div>

					<!-- <el-select size="small" style="width: 90px" class="center" v-model="value" placeholder="选择语言">
					<el-option size="small" v-for="(value, key) of options" :key="key" :label="options[key].label" :value="options[key].value" @click="Languageswitching(options[key].value)"> </el-option>
				</el-select> -->
					<el-radio-group v-model="value">
						<el-radio-button label="zh" @click="Languageswitching('zh')">中文</el-radio-button>
						<el-radio-button label="en" @click="Languageswitching('en')">EN</el-radio-button>
					</el-radio-group>
					<login />
				</div>
				<!-- 登录 点击隐藏当前  -->
			</div>
		</div>
	</div>
</template>
<script>
	import login from './login'
	export default {
		name: 'HeaDer',
		components: {
			// 组件
			login,
		},

		data() {
			return {
				value: 'zh',
				select: 'course',
				keyword: '',
				options: [
					{
						value: 'zh',
						label: '简体中文',
					},
					{
						value: 'en',
						label: '英文',
					},
				],
			}
		},
		methods: {
			//修改语言
			Languageswitching(ele) {
				this.$i18n.locale = ele
			},
			selectfun() {
				if (this.keyword) {
					this.$router.push('/search' + '/' + this.select + '/' + this.keyword)
				} else {
					this.$message.error('请输入关键字')
				}
			},
		},
		mounted() {
			// 生命周期:
			this.$i18n.locale = this.value
		},
	}
</script>
<style>
	.input-with-select {
		height: 32px;
	}
	.secr .el-input-group--prepend > .el-input__wrapper {
		border-top-right-radius: 0 !important;
		border-bottom-right-radius: 0 !important;
		box-shadow: 0 0 0 0 !important;
		border: 1px solid #dcdfe6;
		border-right: 0 !important;
	}

	.secr .el-button {
		border-top-left-radius: 0 !important;
		border-bottom-left-radius: 0 !important;
	}
</style>
<style scoped>
	@media screen and (max-width: 860px) {
		.indexheader {
			display: none;
		}
	}
</style>
